<script setup>
import { ref } from 'vue'
import { artListService, artUpdateStatusService } from '@/api/admin/article'
import { dayjs } from 'element-plus'
import { useRouter } from 'vue-router'
// 数据列表
const tableData = ref([])
const total = ref(0)
// 提交搜索表单
const qureyModler = ref({
  currentPage: 1,
  pageSize: 5,
  title: '',
  articleStatus: ''
})
const getList = async () => {
  const res = await artListService(qureyModler.value)
  tableData.value = res.data.data
  total.value = res.data.total
  console.log(tableData.value[0])
}

getList()

// 分页:页大小变化
const handleSizeChange = (value) => {
  qureyModler.value.pageSize = value
  qureyModler.value.currentPage = 1
  getList()
}

// 分页：当前页变化
const handleCurrentChange = (value) => {
  qureyModler.value.currentPage = value
  getList()
}

// 搜索
const onQuery = () => {
  qureyModler.value.currentPage = 1
  getList()
}

// 重置
const resetForm = () => {
  qureyModler.value.title = ''
  qureyModler.value.articleStatus = ''
  getList()
}

// 操作
// 预览 ( 打开一个新窗口 )
const previewHandler = (row) => {
  window.open(`/detail/${row.id}`)
}
// 删除 （ 修改 文章状态 ）
const delHandler = async (row) => {
  await ElMessageBox.confirm('你确定要删除吗', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await artUpdateStatusService(row.id)
  ElMessage.success('删除成功')
  getList()
}

const router = useRouter()
const editHandler = (row) => {
  router.push(`/admin/post?id=${row.id}`)
}

defineOptions({
  name: 'ArticlePage'
})
</script>
<template>
  <el-card>
    <div class="qurey">
      <!-- 名字 -->
      <el-form :inline="true" :model="qureyModler" class="demo-form-inline">
        <el-form-item label="文章名称">
          <el-input
            v-model="qureyModler.title"
            placeholder="请输入文章名称"
            clearable
          />
        </el-form-item>
        <!-- 类型 -->
        <el-form-item label="文章状态">
          <el-select
            style="width: 200px"
            v-model="qureyModler.articleStatus"
            placeholder="请选择"
            clearable
          >
            <el-option label="草稿箱" value="0" />
            <el-option label="已发布" value="1" />
            <el-option label="已删除" value="2" />
          </el-select>
        </el-form-item>
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="onQuery">搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 写文章 -->
    <el-button @click="router.push('/admin/post')">写文章</el-button>
    <!-- 文章列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="标题" prop="title" width="150">
        <template #default="{ row }">
          <div class="ellipsis-container">{{ row.title }}</div>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="article_status" width="130">
        <template #default="{ row }">
          <el-tag v-if="row.articleStatus === 1" type="success">发布</el-tag>
          <el-tag v-else-if="row.articleStatus === 0" type="info"
            >草稿箱</el-tag
          >
          <el-tag v-else-if="row.articleStatus === 2" type="danger"
            >删除</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="分类" prop="catName" width="130">
      </el-table-column>
      <el-table-column label="标签" prop="tagNames" width="180" class="tag">
        <template #default="{ row }">
          <el-tag
            class="tag-item"
            v-for="(item, index) in row.tags"
            :key="index"
            :color="item.color"
          >
            {{ item.tagName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="访问" prop="view" width="130"> </el-table-column>
      <el-table-column label="发布时间" prop="updateTime" width="180">
        <template #default="{ row }">
          {{ dayjs(row.updateTime).format('YYYY-MM-DD HH:mm') }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="80">
        <template #default="{ row }">
          <el-button
            size="small"
            style="margin-left: 12px"
            @click="previewHandler(row)"
            >预览</el-button
          >
          <el-button size="small" type="primary" @click="editHandler(row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="delHandler(row)"
            :disabled="row.articleStatus === 2"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="justify-content: end; margin-top: 30px"
      v-model:current-page="qureyModler.currentPage"
      background
      v-model:page-size="qureyModler.pageSize"
      :page-sizes="[3, 5, 10]"
      layout="sizes, prev, pager, next , total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<style scoped>
.tag-item {
  color: #fff;
}

.ellipsis-container {
  overflow: hidden; /* 隐藏超出容器范围的内容 */
  white-space: nowrap; /* 不换行显示文本 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>
